<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        padding: 100px;
      }

      textarea {
        width: 300px;
        height: 100px;
        border: 1px solid #ccc;
        outline: none;
        resize: none;
      }

      ul {
        margin-left: 70px;
        list-style: none;
      }

      li {
        width: 300px;
        padding: 5px;
        border-bottom: 1px dotted #ccc;
        font-size: 14px;
      }

      li a {
        margin-left:10px;
      }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div class="box">
      <span>发表留言</span>
      <textarea name="" class="txt" cols="30" rows="10"></textarea>
      <button class="btn">发布</button>
    </div>
    <ul></ul>
    <script>
      $(".btn").on("click", function () {
        var li = $("<li></li>");
        li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
        $("ul").prepend(li);
        li.slideDown();
        $(".txt").val("");
      });
      $("ul").on("click", "a", function () {
        $(this).parent().slideUp(function () {
          $(this).remove();
        });
      });
    </script>
  </body>
</html>